<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>审核管理</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        /*鼠标放上小手标志*/
        font {
            cursor: pointer;
        }

        button {
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="demoTable">
    <form>
        <select id="itemsState" style="width: 80px;height: 38px;border-color: #efefef;">
            <option value="">审核状态</option>
            <option value="1">待审核</option>
            <option value="2">审核中</option>
            <option value="3">已驳回</option>
            <option value="4">已通过</option>
        </select>
        &nbsp;&nbsp;
        <select id="itemsObjname" style="width: 80px;height: 38px;border-color: #efefef;">
            <option value="">申报类型</option>
            <option value="单位">单位</option>
            <option value="个人">个人</option>
        </select>
        <select id="itemsDepartments" style="width: 80px;height: 38px;border-color: #efefef;">
            <option value="">部门</option>
        </select>
        <!--    <select id="re_sel" name="re_sel" lay-verify="required"  class="select" style="width: 170px"></select>-->
        时间:
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="userCreateTime" autocomplete="off" placeholder="开始时间"
                   style="width: 150px">
        </div>
        至
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="userFinishTime" autocomplete="off" placeholder="结束时间"
                   style="width: 150px">
        </div>
        <div class="layui-inline">
            <input class="layui-input" name="demoReload" id="demoReload" autocomplete="off" placeholder="输入项目名称,主管部门">
        </div>
        <button class="layui-btn" data-type="reload" id="reload">查询</button>
        <div class="layui-input-inline">
            <input type="reset" class="layui-input"
                   style="width: 60px;height: 38px;text-align: center;background-color:#16c4ff;color: white ">
        </div>
    </form>

</div>
<table class="layui-hide" id="test" lay-filter="test"></table>


<!-- 操作指令 -->
<script type="text/html" id="barDemo">
    <a lay-event="edit">
        <font color="#0000FF">查看</font>
    </a>
</script>

<script src="../static/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            url: '/selItemsList',
            title: '用户数据表',
            cols: [
                [{
                    field: 'usersRoleName',
                    title: '申报人',
                    width: 100
                }, {
                    field: 'itemsName',
                    title: '申报项目',
                    width: 285
                }, {
                    field: 'itemsDepartment',
                    title: '部门',
                    width: 285
                }, {
                    field: 'itemsObjname',
                    title: '申报类型',
                    width: 120
                }, {
                    field: 'itemsDate',
                    title: '申报时间',
                    width: 250,
                    sort: true
                }, {
                    field: 'itemsState',
                    title: '审核状态',
                    width: 150,
                    templet: function (object) {
                        if (object.itemsState == 1) {
                            return '<button class="layui-btn layui-btn-danger layui-btn-xs">待审核</button>'
                        } else if (object.itemsState == 2) {
                            return '<button class="layui-btn layui-btn-warm layui-btn-xs">审核中</button>'
                        } else if (object.itemsState == 3) {
                            return '<button class="layui-btn  layui-btn-primary layui-border-red layui-btn-xs">已驳回</button>'
                        } else if (object.itemsState == 4) {
                            return '<button class="layui-btn layui-btn-normal layui-btn-xs">已通过</button>'
                        }
                    }
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 100
                }]
            ],
            page: true,
            height: 515,
            id: 'testReload',
        });
        // 模糊查询 搜索
        var $ = layui.$, active = {
            reload: function () {
                var itemsState = $('#itemsState').val();
                var itemsObjname = $('#itemsObjname').val();
                var itemsDepartments = $('#itemsDepartments').val();
                var itemsCreatedate = $('#userCreateTime').val();
                var itemsFinishdate = $('#userFinishTime').val();
                var demoReload = $('#demoReload').val();
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        itemsState: itemsState,
                        itemsObjname: itemsObjname,
                        itemsDepartment: itemsDepartments,
                        itemsCreatedate: itemsCreatedate, //逗号隔开
                        itemsFinishdate: itemsFinishdate,
                        demoReload: demoReload
                    }
                });
            }
        };
        //提交
        $('.demoTable .layui-btn').on('click', function (e) {
            e.preventDefault();
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //编辑按钮
                $("#boxDiv").css("display", "block");
                $("#usersRoleName").val(data.usersRoleName);
                $("#itemsName").val(data.itemsName);
                $("#itemsDepartment").val(data.itemsDepartment);
                $("#itemsObjnames").val(data.itemsObjname);
                $("#itemsDate").val(data.itemsDate);
                $("#itemsDtdname").val(data.itemsDtdname);
                $("#itemsZtname").val(data.itemsZtname);
                $("#itemsCount").val(data.itemsCount);
                $("#itemsMoneye").val(data.itemsMoneye);
                $("#itemsPhone").val(data.itemsPhone);
                $("#itemsContext").val(data.itemsContext);
                $("#itemsCondition").val(data.itemsCondition);
            }
        });
    });
</script>
<script>
    layui.use('form', function () {
        var $ = layui.jquery;
        var form = layui.form;
        //地区
        $.ajax({
            url: '/selDepartments',
            dataType: 'json',
            type: 'post',
            success: function (data) {
                console.log(data);
                var item = data.data;
                var box = document.getElementById("itemsDepartments");
                for (var i = 0; i < item.length; i++) {
                    box.innerHTML += '<option value="' + item[i].departmentName + '">' + item[i].departmentName + '</option>';
                }
            }
        });
    });
    //日期范围
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '#userCreateTime'
            , type: 'datetime'
        });
        laydate.render({
            elem: '#userFinishTime'
            , type: 'datetime'
        });
        laydate.render({
            elem: '#userBirthday',
            calendar: true
        });
    });

    //添加编辑取消
    function cancel() {
        $("#boxDiv").css("display", "none");
    }
</script>
<div style="width: 500px;background-color: whitesmoke; height: 400px; display: none;position: fixed;top:15%; left: 30%"
     id="boxDiv">
    <form>
        <table border="1" bgcolor="whitesmoke" cellspacing="0" align="center" width="300" height="300">
            <h3 align="center" id="title">添加用户信息</h3>
            <tr>
                <td>Id</td>
                <td><input type="hidden" id="userId"/></td>
            </tr>
            <tr>
                <td>申报人:</td>
                <td><input type="text" name="usersRoleName" id="usersRoleName" disabled="disabled" autocomplete="off"/>
                </td>
            </tr>
            <tr>
                <td>申报项目名称:</td>
                <td><input type="text" name="itemsName" id="itemsName" disabled="disabled" autocomplete="off"/></td>
            </tr>
            <tr>
                <td>部门名称:</td>
                <td><input type="text" name="itemsDepartment" id="itemsDepartment" disabled="disabled"
                           autocomplete="off"/></td>
            </tr>
            <tr>
                <td>申报类型:</td>
                <td><input type="text" name="itemsObjname" id="itemsObjnames" disabled="disabled" autocomplete="off"/>
                </td>
            </tr>
            <tr>
                <td>申报时间:</td>
                <td><input type="text" name="itemsDate" id="itemsDate" disabled="disabled" autocomplete="off"/></td>
            </tr>
            <tr>
                <td>申报方向:</td>
                <td><input type="text" name="itemsDtdname" id="itemsDtdname" disabled="disabled" autocomplete="off"/>
                </td>
            </tr>
            <tr>
                <td>实施主体名称:</td>
                <td><input type="text" name="itemsDate" id="itemsZtname" disabled="disabled" autocomplete="off"/></td>
            </tr>
            <tr>
                <td>到现场次数:</td>
                <td><input type="text" name="itemsCount" id="itemsCount" disabled="disabled" autocomplete="off"/></td>
            </tr>
            <tr>
                <td>扶持金额:</td>
                <td><input type="text" name="itemsMoneye" id="itemsMoneye" disabled="disabled" autocomplete="off"/></td>
            </tr>
            <tr>
                <td>咨询电话:</td>
                <td><input type="text" name="itemsPhone" id="itemsPhone" disabled="disabled" autocomplete="off"/></td>
            </tr>
            <tr>
                <td>项目描述:</td>
                <td><input type="text" name="itemsContext" id="itemsContext" disabled="disabled" autocomplete="off"/>
                </td>
            </tr>
            <tr>
                <td>受理条件:</td>
                <td><input type="text" name="itemsCondition" id="itemsCondition" disabled="disabled"
                           autocomplete="off"/></td>
            </tr>
            <tr>
                <td rowspan="2" colspan="2" align="center">
                    <button class="button2" onclick="cancel()">关闭</button>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
